<template>
  <div id="positionAndSalary">
    <div class="header">
      <div class="query">
        <div class="query_item">
          <el-input placeholder="请输入规则名称" v-model="query.ruleName"></el-input>
        </div>
        <div class="query_item">
          <el-cascader v-model="query.DeparmentIds" placeholder="请选择" :options="userRange.options" :props="userRange.props" collapse-tags clearable></el-cascader>
        </div>
        <div class="query_item">
          <el-button type="primary">搜索</el-button>
        </div>
      </div>
      <div class="btns">
        <el-button type="primary">新增定岗定薪规则</el-button>
      </div>
    </div>
    <div class="body">
      <el-table :data="list">
        <el-table-column label="序号"> 
          <template slot-scope="{ row }">
            <el-checkbox v-model="checked">{{ row.num }}</el-checkbox>
          </template>
        </el-table-column>
        <el-table-column label="定岗定薪规则名称" prop="ruleName"></el-table-column>
        <el-table-column label="适用范围" prop="rangeText"></el-table-column>
        <el-table-column label="备注" prop="remark"></el-table-column>
        <el-table-column label="操作人" prop="operatorText"></el-table-column>
        <el-table-column label="操作时间" prop="operatorTime"></el-table-column>
        <el-table-column label="操作">
          <template>
            <span class="textBtn">编辑</span>
            <span class="textBtn">复制</span>
            <span class="textBtn">删除</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="footer"></div>
  </div>
</template>

<script>
export default {
  name: "positionAndSalary",
  data() {
    return {
      //查询条件
      query: {
        ruleName: "",
        DeparmentIds: []
      },
      //UserrangeOpention
      userRange: {
        props: { multiple: true },
        options: [
          {
            value: 1,
            label: "东南",
            children: [
              {
                value: 2,
                label: "上海",
                children: [
                  { value: 3, label: "普陀" },
                  { value: 4, label: "黄埔" },
                  { value: 5, label: "徐汇" }
                ]
              },
              {
                value: 7,
                label: "江苏",
                children: [
                  { value: 8, label: "南京" },
                  { value: 9, label: "苏州" },
                  { value: 10, label: "无锡" }
                ]
              },
              {
                value: 12,
                label: "浙江",
                children: [
                  { value: 13, label: "杭州" },
                  { value: 14, label: "宁波" },
                  { value: 15, label: "嘉兴" }
                ]
              }
            ]
          },
          {
            value: 17,
            label: "西北",
            children: [
              {
                value: 18,
                label: "陕西",
                children: [
                  { value: 19, label: "西安" },
                  { value: 20, label: "延安" }
                ]
              },
              {
                value: 21,
                label: "新疆维吾尔族自治区",
                children: [
                  { value: 22, label: "乌鲁木齐" },
                  { value: 23, label: "克拉玛依" }
                ]
              }
            ]
          }
        ]
      },
      //表格数据
      list: [
        {
          num: 1,
          ruleId: "",
          ruleName: "产品部定薪规则",
          rangeText: "研发部;销售部;等15个部门",
          rangeValue: [],
          remark: "备注",
          operatorText: "张三",
          operatorValue: "",
          operatorTime: "2022-09-26 10:54"
        }
      ]
    };
  }
};
</script>

<style lang="less" scoped>
#positionAndSalary {
  padding: 28px;
  .header {
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    .query {
      display: flex;
      flex-flow: row;
      .query_item {
        margin-right: 10px;
      }
    }
  }
  .body {
    .textBtn {
      color: #31a2f2;
      cursor: pointer;
      margin-right: 8px;
    }
    .textBtn:hover {
      color: skyblue;
    }
  }
}
</style>
